<!-- <style>
    body {
        background-color: #f3f3f3;
   }
    .bgc .one {
        background-color: red;
   }
    .bgc .two {
        background-color: #0f0;
   }
    .bgc .three {
        /* 背景透明 */
        background-color: transparent;
   }
</style>
<div class="bgc">
    <div class="one">红色背景</div>
    <div class="two">绿色背景</div>
    <div class="three">透明背景</div>
</div> -->

<!-- <style>
    .bgi .one {
        background-image: url(./微信图片_20230724174659.jpg);
        height: 900px;
        background-repeat: no-repeat;
   }
</style>
<div class="bgi">
    <div class="one">背景图片</div>
</div> -->

<!-- <style>
    .bgr .one {
        background-image: url(./微信图片_20230724174659.jpg);
        height: 300px;
        background-repeat: no-repeat;
        background-position: center;
   }
    .bgr .two {
        background-image: url(./微信图片_20230724174659.jpg);
        height: 300px;
        background-repeat: repeat-x;
   }
    .bgr .three {
        background-image: url(./微信图片_20230724174659.jpg);
        height: 300px;
        background-repeat: repeat-y;
   }
</style>
<div class="bgr">
    <div class="one">不平铺</div>
    <div class="two">水平平铺</div>
    <div class="three">垂直平铺</div>
</div> -->

<!-- <style>
    .bgs .one {
        width: 500px;
        height: 300px;
        background-image: url(./微信图片_20230724174659.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
   }
</style>
<div class="bgs">
    <div class="one">背景尺寸</div>
</div> -->

<!-- <style>
    div {
        width: 200px;
        height: 100px;
        border: 2px solid green;
        border-radius: 10px 20px 30px 40px;
    }
</style>
<div>蛤蛤</div> -->

<!-- <style>
    .demo1 .parent {
        width: 500px;
        height: 500px;
        background-color: green;
   }
    .demo1 .child {
        /* 不写 width, 默认和父元素一样宽 */
        /* 不写 height, 默认为 0 (看不到了) */
        height: 200px;
        background-color: red;
   }
</style>
<div class="demo1">
    <div class="parent">
        <div class="child">
           child1
        </div>
        <div class="child">
           child2
        </div>
    </div>
</div> -->
<!-- 
<style>
    .demo2 span {
        width: 200px;
        height: 200px;
        background-color: red;
   }
</style>
<div class="demo2">
    <span>child1</span>
    <span>child2</span>
    <span>child3</span>
</div> -->

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
<style>
    div {
        width: 100%;
        height: 150px;
        background-color: red;
        display:flex;
        justify-content: flex-end; 
   }
    div>span {
        background-color: green;
        width: 100px;
   }
</style>